<template>
  <div class="dnbooking-area">
    <div class="middle main-area">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <tab-list :list="tabList"></tab-list>
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-area">
          <div class="top-area flx-row-s-c">
            <h3 class="title-h3">抢注预订搜索</h3>
          </div>
          <filter-item name="域名包含" :button="false">
            <div class="filter-slt-area flx-row-s-c">
              <Input
                v-model.trim="name"
                placeholder="多个用逗号隔开"
                maxlength="30"
                style="width: 228px"
              />
              <CheckboxGroup
                class="check-box flx-row-s-c"
                style="flex-shrink: 0"
                v-model="nameLike"
              >
                <Checkbox label="0">开头</Checkbox>
                <Checkbox label="1">结尾</Checkbox>
              </CheckboxGroup>
              <div class="title">域名排除:</div>
              <Input
                v-model.trim="nameExclude"
                placeholder="多个用逗号隔开"
                maxlength="30"
                style="width: 228px"
              />
              <CheckboxGroup
                class="check-box flx-row-s-c"
                style="flex-shrink: 0"
                v-model="nameExcludeLike"
              >
                <Checkbox label="0">开头</Checkbox>
                <Checkbox label="1">结尾</Checkbox>
              </CheckboxGroup>
            </div>
          </filter-item>
          <filter-item
            name="域名后缀"
            :list="domainSuffixList"
            @select-change="selectSuffix"
            :reset="resetSign"
          ></filter-item>
          <filter-item
            name="域名品类"
            :list="domainTypeList"
            @select-change="selectDomainType"
            :reset="resetSign"
          ></filter-item>
          <filter-item
            name="域名构成"
            :list="domainStructureList"
            @select-change="selectDomainStructures"
            :reset="resetSign"
          ></filter-item>
          <filter-item
            name="域名特征"
            :list="domainFeatureList"
            @select-change="selectFeatures"
            :reset="resetSign"
          ></filter-item>
          <filter-item
            name="域名长度"
            :list="domainLenList"
            :oneSelect="true"
            @select-change="selectLength"
            :reset="resetSign"
          >
            <div class="filter-slt-area flx-row-s-c">
              <div class="title">长度范围:</div>
              <Input
                v-model.trim="beginLen"
                number
                placeholder=""
                maxlength="10"
                type="number"
                style="width: 70px"
              />
              <div class="line"></div>
              <Input
                v-model.trim="endLen"
                number
                placeholder=""
                type="number"
                maxlength="10"
                style="width: 70px"
              />
            </div>
          </filter-item>
          <filter-item
            name="结拍日期"
            :list="deleteTimeList"
            :oneSelect="true"
            @select-change="selectDeleteDate"
            :reset="resetSign"
          >
            <div class="filter-slt-area flx-row-s-c">
              <div class="title">价格范围:</div>
              <Input
                v-model.trim="beginPrice"
                number
                placeholder=""
                maxlength="10"
                type="number"
                style="width: 70px"
              />
              <div class="line"></div>
              <Input
                v-model.trim="endPrice"
                number
                placeholder=""
                type="number"
                maxlength="10"
                style="width: 70px"
              />
            </div>
          </filter-item>
          <div class="bottom-area flx-row-s-c">
            <div class="button-style search-button" @click="pageChange(1)">
              搜索
            </div>
            <div class="button-style clear-button" @click="reset">重置</div>
          </div>
        </div>
        <div class="flx-row-bw-c" style="height: 56px">
          <h3 class="title-h3">
            搜索结果
            <span>{{ total != null ? `(${total})` : "" }}</span>
            <span class="refresh-button" @click="pageChange(1)">点击刷新</span>
          </h3>
          <div class="flx-row-s-c page-size-button-area">
            <span>每页显示:</span>
            <div
              class="button-style"
              :class="[item == pageSize ? 'active' : 'not-active']"
              v-for="(item, index) in pageSizeList"
              :key="index"
              @click="pageSizeChange(item)"
            >
              {{ item }}条
            </div>
          </div>
        </div>
        <table class="table-area table-border">
          <thead>
            <tr>
              <th>
                <div class="line-style">域名</div>
              </th>
              <th><div class="line-style">含义</div></th>
              <th><div class="line-style">查询</div></th>
              <th>
                <div
                  class="line-style sort-button"
                  @click="changeSort('lengthSort')"
                >
                  长度
                  <div class="flx-col-s-c" style="margin-left: 4px">
                    <i
                      class="sort-icon-top"
                      :class="{ 'sort-active': lengthSort === 0 }"
                    ></i>
                    <i
                      class="sort-icon-bottom"
                      :class="{ 'sort-active': lengthSort === 1 }"
                    ></i>
                  </div>
                </div>
              </th>
              <th>
                <div
                  class="line-style sort-button"
                  @click="changeSort('PRSort')"
                >
                  PR
                  <div class="flx-col-s-c" style="margin-left: 4px">
                    <i
                      class="sort-icon-top"
                      :class="{ 'sort-active': PRSort === 0 }"
                    ></i>
                    <i
                      class="sort-icon-bottom"
                      :class="{ 'sort-active': PRSort === 1 }"
                    ></i>
                  </div>
                </div>
              </th>
              <th>
                <div
                  class="line-style sort-button"
                  @click="changeSort('priceSort')"
                >
                  当前价格
                  <div class="flx-col-s-c" style="margin-left: 4px">
                    <i
                      class="sort-icon-top"
                      :class="{ 'sort-active': priceSort === 0 }"
                    ></i>
                    <i
                      class="sort-icon-bottom"
                      :class="{ 'sort-active': priceSort === 1 }"
                    ></i>
                  </div>
                </div>
              </th>
              <th>
                <div
                  class="line-style sort-button"
                  @click="changeSort('endTimeSort')"
                >
                  剩余时间
                  <div class="flx-col-s-c" style="margin-left: 4px">
                    <i
                      class="sort-icon-top"
                      :class="{ 'sort-active': endTimeSort === 0 }"
                    ></i>
                    <i
                      class="sort-icon-bottom"
                      :class="{ 'sort-active': endTimeSort === 1 }"
                    ></i>
                  </div>
                </div>
              </th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in list"
              :key="index"
              :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
            >
              <td>
                <div class="line-style flx-col-s-s" style="padding: 8px 0">
                  <div class="flx-row-s-c w-p-100" style="padding-left: 40px">
                    <span class="strong-f f-ell-sin" :title="item.domainName">{{
                      item.domainName
                    }}</span>
                    <div class="hot" v-if="item.isTab"></div>
                  </div>
                  <div
                    class="tips-area"
                    :ref="'tipsArea' + index"
                    v-if="item.isBarrage == 1 && item.barrageText"
                  >
                    <div
                      class="scroll-area"
                      :class="{ 'scroll-action': item.scroll }"
                      :style="{ animationDuration: item.animationDuration }"
                    >
                      <span class="scroll" :ref="'tipsItem' + index">{{
                        item.barrageText
                      }}</span>
                      <span class="scroll" v-if="item.scroll">{{
                        item.barrageText
                      }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin" :title="item.meaning">{{
                    item.meaning ? item.meaning : "-"
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="strong-f f-ell-sin">百度 爱站 谷歌</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.len }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.pr ? item.pr : "-" }}</span>
                </div>
              </td>
              <td>
                <div class="line-style c-o">￥{{ item.price }}</div>
              </td>
              <td>
                <div class="line-style normal-f">{{ item.leftTime }}</div>
              </td>
              <td>
                <div class="line-style">
                  <div class="button" @click="toBiddingDetail(item.id)">
                    出价
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          style="background-color: #fff"
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-e-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { filterList } from "@/utils/publicData";
import { getBiddingList } from "@/api/data";
import { showtime } from "@/utils/format";
export default {
  name: "VipDnbidding",
  components: {
    filterItem: () => import("_c/filterItem/filterItem.vue"),
  },
  data() {
    return {
      loading: false,
      resetSign: false,
      breadCrumb: [{ name: "域名竞价", to: "/dnbidding" }],
      tabList: [
        {
          name: "竞价域名",
          to: "/dnbidding",
        },
        {
          name: "我参与的竞价",
          other: true,
          to: "/user/mybiddings",
        },
        {
          name: "待支付的竞价",
          other: true,
          to: "/user/mywinnings",
        },
      ],
      // 筛选条件
      domainSuffixList: [],
      domainTypeList: [],
      domainStructureList: [],
      domainStructureListTemp: [],
      domainFeatureList: [],
      domainLenList: [],
      testlist: [
        {
          name: "cn",
        },
        {
          name: "com.cn",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
      ],
      deleteTimeList: [],
      test: "",
      contentFAL: [],
      pageSizeList: [50, 100, 200],
      pageSize: 50,

      // 排序数据
      lengthSort: "",
      PRSort: "",
      priceSort: "",
      endTimeSort: "",

      // 表单数据
      suffixList: [],
      domainType: [],
      domainStructures: [],
      features: [],
      length: [],
      deleteDate: [],

      name: "",
      nameLike: [],
      nameExclude: "",
      nameExcludeLike: [],
      beginLen: "",
      endLen: "",
      beginPrice: "",
      endPrice: "",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      page: 1,
      list: [],
    };
  },
  mounted() {
    this.getFilterList();
    this.getDeleteTimeList();
    this.getList();
  },
  methods: {
    // 滚动字幕
    scrollTip() {
      for (let i in this.list) {
        if (this.list[i].barrageText) {
          let item = "tipsArea" + i;
          let length = this.$refs[item][0].clientWidth;
          let itemLength = this.$refs["tipsItem" + i][0].offsetWidth;
          if (itemLength > length) {
            this.$set(this.list[i], "scroll", true);
            this.$set(this.list[i], "animationDuration", itemLength / 30 + "s");
          }
          this.$refs[item][0].style.animationDuration = "";
        }
      }
    },
    // 获取筛选条件
    async getFilterList() {
      let list = await filterList();
      if (list != null) {
        this.domainSuffixList = list.domainSuffixList;
        this.domainTypeList = list.domainTypeList;
        this.domainStructureList = list.domainStructureList;
        this.domainStructureListTemp = list.domainStructureList;
        this.domainFeatureList = list.domainFeatureList;
        this.domainLenList = list.domainLenList;
      }
    },
    // 获取删除日期
    getDeleteTimeList() {
      let day1 = new Date();
      day1.setTime(day1.getTime());
      let value1 =
        day1.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 9
          ? day1.getMonth() + 1
          : "0" + (day1.getMonth() + 1)) +
        "-" +
        (day1.getDate() > 9 ? day1.getDate() : "0" + day1.getDate());

      let day2 = new Date();
      day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000);
      let value2 =
        day2.getFullYear() +
        "-" +
        (day2.getMonth() + 1 > 9
          ? day2.getMonth() + 1
          : "0" + (day2.getMonth() + 1)) +
        "-" +
        (day2.getDate() > 9 ? day2.getDate() : "0" + day2.getDate());

      let day3 = new Date();
      day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000 * 2);
      let value3 =
        day3.getFullYear() +
        "-" +
        (day3.getMonth() + 1 > 9
          ? day3.getMonth() + 1
          : "0" + (day3.getMonth() + 1)) +
        "-" +
        (day3.getDate() > 9 ? day3.getDate() : "0" + day3.getDate());

      this.deleteTimeList = [
        {
          name: `${day1.getMonth() + 1}月${day1.getDate()}日`,
          value: value1,
        },
        {
          name: `${day2.getMonth() + 1}月${day2.getDate()}日`,
          value: value2,
        },
        {
          name: `${day3.getMonth() + 1}月${day3.getDate()}日`,
          value: value3,
        },
      ];
    },
    // 选择域名后缀
    selectSuffix(list) {
      this.suffixList = list;
    },
    // 选择域名品类
    selectDomainType(list) {
      this.domainType = list;
      if (list.length == 0) {
        this.domainStructureList = this.domainStructureListTemp;
      } else {
        this.domainStructureList = this.domainStructureListTemp.filter(
          (item) => {
            let select = false;
            for (let i in list) {
              if (item.pid == list[i].value) {
                select = true;
                break;
              }
            }
            return select == true;
          }
        );
      }
    },
    // 选择域名构成
    selectDomainStructures(list) {
      this.domainStructures = list;
    },
    // 选择域名特征
    selectFeatures(list) {
      this.features = list;
    },
    // 选择域名长度
    selectLength(list) {
      this.length = list;
    },
    // 选择删除日期
    selectDeleteDate(list) {
      this.deleteDate = list;
    },
    // 重置
    reset() {
      this.resetSign = !this.resetSign;
      this.name = "";
      this.nameLike = [];
      this.nameExclude = "";
      this.nameExcludeLike = [];
      this.beginLen = "";
      this.endLen = "";
      this.beginPrice = "";
      this.endPrice = "";
      this.suffixList = [];
      this.domainType = [];
      this.domainStructures = [];
      this.features = [];
      this.length = [];
      this.deleteDate = [];
      this.pageChange(1);
    },
    // 获取列表
    async getList() {
      let data = {
        name: this.name,
        nameExclude: this.nameExclude,
        suffixList: this.suffixList.map((item) => item.name),
        domainCategories: this.domainType.map((item) => item.value),
        domainStructures: this.domainStructures.map((item) => item.value),
        lenSort: this.lengthSort,
        prSort: this.PRSort,
        priceSort: this.priceSort,
        endTimeSort: this.endTimeSort,
        page: this.page,
        limit: this.pageSize,
      };
      if (this.nameLike.length == 1) {
        data.nameLike = this.nameLike[0];
      }
      if (this.nameExcludeLike.length == 1) {
        data.nameExcludeLike = this.nameExcludeLike[0];
      }
      if (this.features.length == 1) {
        if (this.features[0].name == "高年龄") {
          data.isHighAge = 1;
        } else {
          data.recordStatus = 0;
        }
      } else if (this.features.length == 2) {
        data.isHighAge = 1;
        data.recordStatus = 0;
      }
      if (this.beginLen || this.endLen) {
        if (
          !(
            this.beginLen &&
            this.endLen &&
            this.beginLen > 0 &&
            this.endLen > 0 &&
            this.beginLen < this.endLen
          )
        ) {
          this.$Message.warning("请确认长度范围是否输入错误！");
          return;
        }
      }
      if (this.beginLen && this.endLen) {
        data.beginLen = this.beginLen;
        data.endLen = this.endLen;
      } else if (this.length.length != 0) {
        if (this.length[0].name == "8以上") {
          data.beginLen = 9;
        } else {
          data.beginLen = parseInt(this.length[0].name);
          data.endLen = parseInt(this.length[0].name);
        }
      }
      if (this.deleteDate.length == 1) {
        data.endBiddingBeginDate = this.deleteDate[0].value;
        data.endBiddingEndDate = this.deleteDate[0].value;
      }
      if (this.beginPrice || this.endPrice) {
        if (
          !(
            this.beginPrice != null &&
            this.endPrice &&
            this.beginPrice >= 0 &&
            this.endPrice > 0 &&
            this.beginPrice < this.endPrice
          )
        ) {
          this.$Message.warning("请确认价格范围是否输入错误！");
          return;
        }
      }
      if (this.beginPrice != null && this.endPrice) {
        data.beginPrice = this.beginPrice;
        data.endPrice = this.endPrice;
      }
      this.loading = true;
      let res = await getBiddingList(data);
      if (res.code == 200) {
        this.list = res.data.list;
        for (let i in this.list) {
          let leftTime = showtime(this.list[i].endTime);
          let leftTimeString = `${
            leftTime.day != 0 ? leftTime.day + "天 " : ""
          }${leftTime.hour}时 ${leftTime.min}分 ${
            leftTime.day == 0 ? leftTime.sec + "秒" : ""
          }`;
          this.$set(this.list[i], "leftTime", leftTimeString);
        }
        this.total = res.data.total;
        this.$nextTick(() => {
          this.scrollTip();
        });
      }
      this.loading = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    resetSort(itemName) {
      if (itemName === "lengthSort") {
        this.PRSort = "";
        this.priceSort = "";
        this.endTimeSort = "";
      } else if (itemName === "PRSort") {
        this.lengthSort = "";
        this.priceSort = "";
        this.endTimeSort = "";
      } else if (itemName === "priceSort") {
        this.lengthSort = "";
        this.PRSort = "";
        this.endTimeSort = "";
      } else if (itemName === "endTimeSort") {
        this.lengthSort = "";
        this.PRSort = "";
        this.priceSort = "";
      }
    },
    // 切换排序
    changeSort(itemName) {
      this.resetSort(itemName);
      if (this[itemName] === "") {
        this[itemName] = 0;
      } else if (this[itemName] === 0) {
        this[itemName] = 1;
      } else if (this[itemName] === 1) {
        this[itemName] = "";
      }
      this.getList();
    },
    // 跳转至竞价详情
    toBiddingDetail(id) {
      window.open(`/bidding/${id}`, "_blank");
      // this.$router.push({
      //   name: "biddingdetail",
      //   query: {
      //     id: id,
      //   },
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.sort-button {
  cursor: pointer;
}
.dnbooking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;
  .filter-area {
    margin-top: 15px;

    .filter-slt-area {
      height: 47px;

      .check-box {
        flex-shrink: 0;
        margin-left: 11px;
        margin-right: 56px;
      }

      .line {
        width: 20px;
        border-top: rgba($color: #898989, $alpha: 0.4) solid 1px;
        margin: 0 10px;
      }
    }
  }
}
.hot {
  display: inline-block;
  @include size(19px, 27px);
  margin-left: 6px;
  flex-shrink: 0;
  @include bg-setting("hot2");
}
</style>
